var app = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: '韩国进口海牌海苔',
                price: 39.9,
                count: 1
            },
            {
                id: 2,
                name: '印尼进口 Nabati 丽巧克（Richoco）休闲零食 巧克力味 威化饼干',
                price: 11.8,
                count: 1
            },
            {
                id: 3,
                name: '菲律宾进口 道吉草 奶油夹',
                price: 6.5,
                count: 1
            }
        ],
        checkList:[]
    },
    mounted() {
        this.checkAll();
        this.checkAllElement(document.querySelector(".checkAll"));
        this.checkInItems('checkAll');
    },
    computed: {
        totalPrice(){
            var total=0;
            this.checkList.forEach(item => {
                total+=item.price*item.count
            });
            return total.toLocaleString();
        }
    },
    methods: {
        checkAll(){
            console.log('全选');
            this.checkList=this.list.concat();
        },
        checkItem(e,index){
            // console.log(item);
            // console.log(item)
            var element=e.target;
            var $allCheck=document.querySelector('.checkAll');
            var item=this.list[index];
            if(element.checked){
                this.checkList.push(item);
                this.checkAllElement($allCheck);
            }else{
                //删除checkList中对应的item;
                var $checkdList=this.checkList;
                for(var i=0;i<$checkdList.length;i++){
                    if($checkdList[i].id===item.id){
                        $checkdList.splice(i,1);
                    }
                }
                $allCheck.checked=false;
            }
        },
        reduceCount(index){
            if(this.list[index].count==0)return;
            this.list[index].count--;
        },
        addCount(index){
            this.list[index].count++;
        },
        checkAllOrNot(e){
            //全选
            if(e.target.checked){
                this.checkInItems('checkAll');
                this.checkAll();
                console.log("checkList：" + this.checkList);
            }else{
                this.checkInItems();
                this.checkList.splice(0);
            }
        },
        remove(index){
            console.log('remove:'+index);
            //删除的item
            var item=this.list[index];
            this.list.splice(index,1);
            var $checkdList=this.checkList;
            for(var i=0;i<$checkdList.length;i++){
                if($checkdList[i].id===item.id){
                    $checkdList.splice(i,1);
                }
            }
            this.checkAllElement(document.querySelector(".checkAll"));
        },
        checkInItems(type){
            var itemsCheck=document.querySelectorAll('.checkItem');
            itemsCheck.forEach(item=>{
                if(type==='checkAll'){
                    item.checked=true;
                }else{
                    item.checked=false;
                }
            })
        },
        checkAllElement(element){
            if(this.list.length===this.checkList.length){
                element.checked=true;
            }
        }
    },
})